<template>
  <el-container class="agent-level">
    <el-header class="sa-header">
      <div class="tip sa-m-t-20">温馨提示：更换等级后，该用户不会降级</div>
    </el-header>
    <el-main>
      <el-table class="sa-table" :data="state.tableData" stripe>
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column prop="name" label="等级信息" min-width="150" />
        <el-table-column label="等级权重" min-width="90">
          <template #default="scope"> 等级{{ scope.row.level }} </template>
        </el-table-column>
        <el-table-column label="操作" min-width="80" fixed="right">
          <template #default="scope">
            <span v-if="scope.row.level == state.selected" class="sa-color--info"> 已选择 </span>
            <el-button v-else class="is-link" type="primary" @click="onSelect(scope.row.level)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button type="primary" @click="confirm">确定</el-button>
    </el-footer>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive } from 'vue';
  import { api } from '../commission.service';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps(['modal']);

  const state = reactive({
    tableData: [],
    selected: props.modal.params.level,
  });

  async function getData() {
    const { data } = await api.level.select();
    state.tableData = data;
  }

  function onSelect(level) {
    state.selected = level;
  }

  function confirm() {
    emit('modalCallBack', { event: 'confirm', data: state.selected });
  }

  onMounted(() => {
    getData();
  });
</script>
<style lang="scss" scoped>
  .agent-level {
    .tip {
      line-height: 16px;
      font-size: 12px;
      font-weight: 500;
      color: var(--sa-font);
    }
  }
</style>
